<template>
  <div>
    <el-dialog
      title="审核"
      :visible="inProveModal"
      size="small"
      :before-close="hideModalAlert"
    >
      <el-form
        ref="checkForm"
        :model="checkFormModel"
        label-width="110px"
        :rules="checkFormModelRules"
      >
        <el-form-item
          label="区域"
          prop="areaTeamId"
        >
          <el-select
            v-model="checkFormModel.areaTeamId"
            disabled
          >
            <el-option
              v-for="item in areaTeams"
              :key="item.value"
              :value="item.value"
              :label="item.text"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="期数"
          prop="periodId"
        >
          <el-select
            v-model="checkFormModel.periodId"
            disabled
          >
            <el-option
              v-for="item in checkPeriodIds"
              :key="item.periodId"
              :label="item.periodName"
              :value="item.periodId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="业务组"
          prop="busTeamId"
        >
          <el-select v-model="checkFormModel.busTeamId">
            <el-option
              v-for="item in busTeams"
              :key="item.busTeamId"
              :label="item.name"
              :value="item.busTeamId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="校区"
          prop="campusId"
        >
          <el-select v-model="checkFormModel.campusId">
            <el-option
              v-for="item in campusTeams"
              :key="item.campusId"
              :label="item.campusName"
              :value="item.campusId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="段次"
          prop="segmentNo"
        >
          <el-select v-model="checkFormModel.segmentNo">
            <el-option
              v-for="item in segmentsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="课程"
          prop="courseName"
        >
          <div style="display:inline-block">
            <el-input
              v-model="checkFormModel.courseName"
              style="width:200px"
              disabled
            >
            </el-input>
          </div>

          <div style="display:inline-block">
            <el-button @click="courseChoose">选择</el-button>
          </div>
        </el-form-item>
        <el-form-item
          label="年级"
          prop="gradeId"
        >
          <el-select
            v-model="checkFormModel.gradeId"
            disabled
          >
            <el-option
              v-for="item in grades"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="科目"
          prop="subjectId"
        >
          <el-select
            v-model="checkFormModel.subjectId"
            disabled
          >
            <el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="层级"
          prop="level"
        >
          <el-select v-model="checkFormModel.level">
            <el-option
              v-for="item in regLevels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="讲数"
          prop="lectureAmount"
        >
          <el-input
            placeholder="请输入讲数"
            v-model="checkFormModel.lectureAmount"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="每一讲时长"
          prop="lectureDuration"
        >
          <el-input
            placeholder="请输入时长"
            v-model="checkFormModel.lectureDuration"
            disabled
          >
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="学位"
          prop="quota"
        >
          <el-input
            placeholder="请输入学位"
            v-model="checkFormModel.quota"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="学费"
          prop="studyingFee"
        >
          <el-input
            placeholder="请输入时长"
            v-model="checkFormModel.studyingFee"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="班级名称"
          prop="className"
        >
          <el-input
            placeholder="请输入班级名称"
            v-model="checkFormModel.className"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="网报班名显示"
          prop="classAliasName"
        >
          <el-input
            placeholder="请输入班级名称"
            v-model="checkFormModel.classAliasName"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="首讲日期"
          prop="startCourseTime"
        >
          <el-date-picker
            size="small"
            v-model="checkFormModel.startCourseTime"
            type="date"
            :editable="false"
            placeholder="选择日期范围"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="规避日期">
          <div>
            <el-input
              type="text"
              placeholder="规避节日：选填,填入数据须用空格隔开 如：2014-05-01 2014-10-01"
              v-model="checkFormModel.avoidDate"
            />
            <div>例子：2014-05-01 2014-10-01</div>
          </div>

        </el-form-item>
        <el-form-item
          label="首讲时间"
          prop="studyingTime"
        >
          <div class="am-u-sm-4 input-field">
            <time-picker
              v-model="checkFormModel.studyingTime"
              class="aTimePicker"
            ></time-picker>
          </div>
          <!-- <el-time-picker
            v-model="checkFormModel.studyingTime"
            is-range
            :editable="true"
            format='HH:mm'
            value-format="HH:mm"
            placeholder="选择时间"
          ></el-time-picker>
          <div>格式：24小时制</div> -->
        </el-form-item>
        <el-form-item
          label="上课周期"
          prop="classPeriod"
        >
          <el-select v-model="checkFormModel.classPeriod">
            <el-option
              value="每周"
              label="每周"
            ></el-option>
            <el-option
              value="每天"
              label="每天"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任课老师">
          <div style="width: 250px;display:inline-block">
            <el-input
              v-model="checkFormModel.teacherName"
              disabled
            ></el-input>
          </div>
          <div style="display:inline-block; margin-left:30px">
            <el-button
              @click="showTeacher"
              :disabled="!(checkFormModel.areaTeamId && checkFormModel.gradeId)"
            >请选择</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="finish"
          >完成</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <SelectCourse
      ref="selectCourse"
      @ok="fillData2Class"
      :queryProps="{
        propsData: {
          areaTeamId: checkFormModel.areaTeamId,
          periodId: checkFormModel.periodId,
          gradeId: checkFormModel.gradeId,
          subjectId: checkFormModel.subjectId
        }
      }"
    ></SelectCourse>
  </div>
</template>
<script>
import io from '../../../lib/io'
import myMixin from '../../base/mixins.js'
import SelectCourse from './applySelectCourse'
import { regLevels } from '../../../lib/global/index.js'
import moment from 'moment'

export default {
  data() {
    return {
      descsShow: true,
      isPassShow: false,
      passReason: '',
      regLevels,
      ischeckModal: false,
      checkFormModel: {
        areaTeamId: '',
        periodId: '',
        busTeamId: '',
        campusId: '',
        segmentNo: '',
        courseName: '',
        gradeId: '',
        subjectId: '',
        level: '',
        lectureAmount: '',
        lectureDuration: '',
        studyingFee: '',
        quota: '',
        classAliasName: '',
        startCourseTime: '',
        studyingTime: '',
        classPeriod: '',
        teacherId: '',
        teacherName: '',
        classPeriod: '',
        className: '',
        avoidDate: ''
      },
      passType: '',
      checkPeriodIds: [],
      segmentsList: [],
      checkFormModelRules: {
        campusId: [
          { required: true, message: '请选择校区', trigger: 'change' }
        ],
        segmentNo: [
          { required: true, message: '请选择段次', trigger: 'change' }
        ],
        areaTeamId: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        periodId: [
          { required: true, message: '请选择期数', trigger: 'change' }
        ],
        busTeamId: [
          {
            required: true,
            message: '请选择业务组',
            trigger: 'change'
          }
        ],
        level: [
          {
            required: true,
            message: '请选择层级',
            trigger: 'change'
          }
        ],
        gradeId: [
          {
            required: true,
            message: '请选择年级',
            trigger: 'change'
          }
        ],
        className: [{ required: true, message: '请填写班级', trigger: 'blur' }],
        subjectId: [{ required: true, message: '请选择科目', trigger: 'blur' }],
        startCourseTime: [
          {
            required: true,
            type: 'date',
            message: '请选择首讲日期',
            trigger: 'blur'
          }
        ],
        studyingTime: [
          {
            required: true,
            // type: 'array',
            message: '请选择首讲时间',
            trigger: 'blur'
          }
        ],
        lectureAmount: [
          { required: true, message: '请填写讲数', trigger: 'blur' }
        ],
        lectureDuration: [
          { required: true, message: '请填写时长', trigger: 'blur' }
        ],
        quota: [{ required: true, message: '请填写学位', trigger: 'blur' }],
        studyingFee: [
          { required: true, message: '请填写学费', trigger: 'blur' }
        ],
        courseName: [
          {
            required: true,
            message: '请填写班级名称',
            trigger: 'blur'
          }
        ],
        classAliasName: [
          { required: true, message: '请填写网报班名显示', trigger: 'blur' }
        ],
        classPeriod: [
          { required: true, message: '请选择上课周期', trigger: 'change' }
        ]
      }
    }
  },
  props: ['data', 'isShow', 'mode', 'base', 'inProveModal'],
  created() {
    if (this.data.areaTeamId) {
      this.checkFormModel = {
        ...this.checkFormModel,
        ...this.data
      }
      this.checkFormModel.startCourseTime = new Date(
        Number(this.checkFormModel.startCourseTime)
      )
      // this.checkFormModel.studyingTime = this.checkFormModel.studyingTime
      //   .split('-')
      //   .map(item => {
      //     let timeStr = `${moment(
      //       Number(this.checkFormModel.startCourseTime)
      //     ).format('YYYY-MM-DD')} ${item}:00`
      //     return new Date(timeStr)
      //   })
    }
    this.$parent.$on('checkModalSuccess', item => {
      this.checkFormModel.teacherId = item.teacherId
      this.checkFormModel.teacherName = item.teacherName
    })
  },
  mixins: [myMixin],
  components: {
    SelectCourse
  },
  computed: {
    busTeams: function() {
      return this.checkFormModel.areaTeamId
        ? this.$root.config.groupBusTeams[this.checkFormModel.areaTeamId] || []
        : []
    },
    campusTeams: function() {
      this.$root.config.campusList = this.$root.config.campusList || []
      return this.checkFormModel.areaTeamId
        ? (this.$root.config.campusList.length > 0 &&
            this.$root.config.campusList.filter(
              val => val.areaTeamId === this.checkFormModel.areaTeamId
            )) ||
            []
        : []
    }
  },
  watch: {
    'checkFormModel.periodId': function() {
      if (!this.checkFormModel.periodId) {
        return
      }
      if (!this.checkFormModel.areaTeamId) {
        return
      }
      this.segmentsList = []
      this.loadPeriod(this.checkFormModel.areaTeamId).then(data => {
        this.checkPeriodIds = data
        this.counetSegments(data, this.checkFormModel.periodId)
      })
    }
  },
  methods: {
    finish() {
      this.$refs.checkForm.validate(vaild => {
        if (this.checkFormModel.studyingTime) {
          let startTime = new Date(
            `2019-6-6 ${this.checkFormModel.studyingTime.split('-')[0]}`
          )
          let endTime = new Date(
            `2019-6-6 ${this.checkFormModel.studyingTime.split('-')[1]}`
          )
          if (startTime.getTime() > endTime.getTime()) {
            alert('开始时间不能大于结束时间')
            return
          }
        }
        if (vaild) {
          let formData = { ...this.checkFormModel }
          formData.startCourseTime = moment(formData.startCourseTime).format(
            'YYYY-MM-DD'
          )

          io.post(
            io.createClassByApply,
            {
              ...formData
            },
            ret => {
              if (ret.success) {
                this.hideModalAlert()
                this.$alert('添加成功')
                this.$emit('finishUpdated')
              } else {
                this.$alert(ret.desc)
              }
            }
          )
        }
      })
    },
    showTeacher() {
      this.$emit('selectTeacher', 'checkModal')
    },
    courseChoose() {
      this.$refs.selectCourse.selectCourseModal = true
    },
    fillData2Class(itemData) {
      itemData.busTeamId = this.checkFormModel.busTeamId
      itemData.busTeamName = this.checkFormModel.busTeamName
      itemData.className = this.checkFormModel.className
      this.checkFormModel = {
        ...this.checkFormModel,
        ...itemData
      }
    },
    counetSegments(periodIds, currentPer) {
      for (let item of periodIds) {
        if (item.periodId === currentPer) {
          let i = 1
          while (i <= Number(item.segments)) {
            this.segmentsList.push({ value: i + '', label: i })
            i++
          }
        }
      }
    },
    hideModalAlert() {
      this.$emit('inProveClose')
    }
  }
}
</script>
<style lang="less" scoped>
.desc {
  tr {
    height: 50px;
  }
}
.baseText {
  color: red;
  display: flex;
}
.applyReason {
  word-break: break-all;
}
.checkBtns {
  margin-top: 30px;
  width: 100%;
  > div {
    width: 210px;
    margin: 0 auto;
  }
}
.noPassBtns {
  width: 100%;
  .n_sure {
    margin: 20px auto 0 auto;
  }
}
</style>


